<template>
  <Modal
    :active="normalVectorModalVueActive"
    transfer
    title="法向向量"
    hide-mask
    draggable
    :width="650"
    :no-footer="true"
    @close="closeBtn"
  >
    <div class="box">
      <div class="selector">
        <!-- <div class="selector-title">Selector</div> -->
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">选择器</div>
        </div>
        <div class="selector-content">
          <div class="selector-buttons">
            <button class="selector-button active">单元</button>
            <button class="selector-button icon-button" @click="clear">
              <img src="../assets/delete.svg" alt="" class="icon imgStyle" />
            </button>
          </div>
        </div>
      </div>
      <div class="selector">
        <!-- <div class="selector-title">Selector</div> -->
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">显示设置</div>
        </div>
        <div class="type_box">
          <Grid :gap="8" :columns="24" style="width: 100%">
            <Cell :width="7">
              <div class="type_label">类型:</div>
            </Cell>
            <Cell :width="17">
              <div>
                <Select
                  v-model:value="typeValue"
                  clearable
                  :options="options"
                ></Select>
              </div>
            </Cell>
          </Grid>
        </div>
        <div class="type_box">
          <Grid :gap="8" :columns="24" style="width: 100%">
            <Cell :width="7">
              <div class="type_label">箭头类型:</div>
            </Cell>
            <Cell :width="17">
              <div>
                <Select
                  v-model:value="arrowTypeValue"
                  :options="arrowOptions"
                  clearable
                ></Select>
              </div>
            </Cell>
          </Grid>
        </div>
        <div class="type_box">
          <Grid :gap="8" :columns="24" style="width: 100%">
            <Cell :width="7">
              <div class="type_label">缩放系数=:</div>
            </Cell>
            <Cell :width="17">
              <div>
                <Input v-model:value="scaleFactor" clearable></Input>
              </div>
            </Cell>
          </Grid>
        </div>
        <div class="type_box">
          <Grid :gap="8" :columns="24" style="width: 100%">
            <Cell :width="7"> </Cell>
            <Cell :width="17">
              <div>
                <Checkbox v-model:checked="checked"> 保持显示 </Checkbox>
              </div>
            </Cell>
          </Grid>
        </div>
        <div class="type_box">
          <Grid :gap="8" :columns="24" style="width: 100%">
            <Cell :width="7">
              <div class="type_label">颜色:</div>
            </Cell>
            <Cell :width="17">
              <div>
                <ColorPicker v-model:value="color"> </ColorPicker>
              </div>
            </Cell>
          </Grid>
        </div>
      </div>
      <div class="selector">
        <!-- <div class="selector-title">Selector</div> -->
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">单元法向操作</div>
        </div>
        <div class="selector-content">
          <div class="selector-buttons">
            <button class="selector-button active">二维单元</button>
            <button class="selector-button icon-button">
              <img src="../assets/delete.svg" alt="" class="icon imgStyle" />
            </button>
          </div>
        </div>
      </div>
      <div class="foot-box">
        <Button type="error" size="small" @click="reset">重置</Button>
        <Button type="success" size="small" @click="show">显示</Button>
        <Button type="default" size="small" @click="reverseNormal">反转</Button>
        <Button type="default" size="small" @click="alignNormal">对齐</Button>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  Modal,
  Button,
  Grid,
  Cell,
  Select,
  Input,
  Checkbox,
  Message,
  ColorPicker,
} from "cax-ui";
import type { Color } from "cax-ui";
import { useCoreStore, _global } from "@/UI/store";
import { storeToRefs } from "pinia";
const coreStore = useCoreStore();
const { normalVectorModalVueActive } = storeToRefs(coreStore);

const color = ref<Color>({ r: 0, g: 255, b: 0 });
const typeValue = ref(1);
const arrowTypeValue = ref(1);
const scaleFactor = ref(15);
const checked = ref(false);
let eids = [];
let normals = [];
const options = [
  {
    label: "箭头显示",
    value: 1,
  },
  {
    label: "颜色显示",
    value: 2,
  },
];
const arrowOptions = [
  {
    label: "正常",
    value: 1,
  },
];

function reverseNormal() {
  _global.Engine.mesh
    .normal_reverse(_global.Engine.state.get_selected_mesh_ids())
    .then(() => {});
}
function closeBtn() {
  if (!checked.value) {
    reset();
  }
  normalVectorModalVueActive.value = false;
}
function alignNormal() {
  _global.Engine.mesh
    .normal_align(_global.Engine.state.get_selected_mesh_ids())
    .then(() => {});
}

function show() {
  _global.Engine.mesh
    .normal_get(_global.Engine.state.get_selected_mesh_ids())
    .then((back: { Result: { eids: number[]; normals: number[] } }) => {
      eids = back.Result.eids;
      normals = back.Result.normals;
      _global.Engine.mesh.normal_show(
        back.Result.eids,
        back.Result.normals,
        scaleFactor.value,
        [color.value.r, color.value.g, color.value.b]
      );
    });
}

function clear() {
  eids = [];
  normals = [];
  _global.Engine.selector.clearAll();
  Message.success("清除成功");
}

function reset() {
  _global.Engine.mesh.normal_hide();
}
</script>
<style scoped>
.box {
  padding: 15px;
}

.selector {
  /* border: 1px solid #e0e0e0; */
  border-radius: 4px;
  /* background-color: #f5f5f5; */
  padding: 10px;
}

.selector-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.selector-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selector-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.selector-button {
  height: 32px;
  width: 200px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* flex-grow: 1; */
  font-weight: normal;
}

.icon-button {
  width: 32px;
  padding: 3px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
  background-color: #fff;
}

.icon-arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
}

.icon-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #1e88e5;
}
.imgStyle {
  width: 100%;
  height: 100%;
}
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.foot-box {
  width: 100%;
  height: 40px;
  text-align: right;
}
.type_box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 15px;
}
.type_label {
  text-align: left;
  padding-left: 60px;
  height: 30px;
  line-height: 30px;
}
</style>
